<script lang="ts" setup>
import { h } from 'vue';

import { CloseOutlined } from '@ant-design/icons-vue';
import { Button, Input, InputNumber } from 'ant-design-vue';

const emit = defineEmits(['blur', 'change']);

interface ChargeMode {
  meetingId?: number | string;
  name?: string;
  amount?: number | undefined;
}

const modelValue = defineModel<ChargeMode[]>({
  default: () => [],
});

function onChange() {
  emit('change', modelValue.value);
}

function addCharge() {
  modelValue.value.push({
    name: '',
    amount: 0,
  });
}

function removeCharge(index: number) {
  modelValue.value.splice(index, 1);
}
</script>
<template>
  <div>
    <div
      v-for="(mode, i) in modelValue"
      :key="i"
      class="mb-[10px] flex w-full gap-2"
    >
      <Input
        v-model:value="mode.name"
        placeholder="收费选项名称"
        class="w-[200px]"
        allow-clear
        :class="{ 'valid-success': !!mode.name }"
        @blur="emit('blur')"
        @change="onChange"
      />
      <InputNumber
        v-model:value="mode.amount"
        class="w-[130px]"
        placeholder="请输入金额"
        allow-clear
        :precision="2"
        string-mode
        :class="{ 'valid-success': (mode.amount as number) >= 0 }"
        @blur="emit('blur')"
        @change="onChange"
      />
      <Button :icon="h(CloseOutlined)" @click="removeCharge(i)" />
    </div>
    <Button @click="addCharge">添加</Button>
  </div>
</template>
